<template>
	<div class="mail-send-edit-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="1000px">

			<el-card shadow="hover">
				<el-form :model="state.ruleForm" ref="malledisdiaFormRef" :rules="rules" size="default" label-width="100px">
					<el-row :gutter="35">

						<div style="display:flex;">
							<el-form-item label="邮箱用户名" v-if="!state.isEdit">
								<el-input v-model="state.ruleForm.userName"></el-input>
							</el-form-item>
							<el-form-item label="邮箱用户名" v-if="state.isEdit == true">
								<el-input v-model="state.ruleForm.userName" disabled></el-input>
							</el-form-item>
							<el-form-item label="邮箱密码">
								<el-input type="password" auto-complete="new-password" v-model="state.ruleForm.password" show-password></el-input>
							</el-form-item>
						</div>

						<div style="display:flex;">
							<el-form-item label="邮件端口">
								<el-input v-model="state.ruleForm.port"></el-input>
							</el-form-item>
							<el-form-item label="服务器地址">
								<el-input v-model="state.ruleForm.host"></el-input>
							</el-form-item>
						</div>

						<div style="display:flex;">
							<el-form-item label="协议">
								<el-input v-model="state.ruleForm.protocol"></el-input>
							</el-form-item>
						</div>
						<div style="display:flex;">
							<el-form-item label="STARTTLS">
								<el-switch v-model="state.ruleForm.starttlsEnabled" active-color="#13ce66" inactive-color="#ff4949" :active-value="true"
									:inactive-value="false">
								</el-switch>
							</el-form-item>
							<el-form-item label="SSL">
								<el-switch v-model="state.ruleForm.tlsEnabled" active-color="#13ce66" inactive-color="#ff4949" :active-value="true"
									:inactive-value="false">
								</el-switch>
							</el-form-item>

							<el-form-item label="状态">
								<el-switch v-model="state.ruleForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="true"
									:inactive-value="false">
								</el-switch>
							</el-form-item>
						</div>



					</el-row>
				</el-form>


			</el-card>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>

<script setup lang="ts" name="mailsendeditdialog">
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';
// 导入接口
import { useMailApi } from "../../../api/mail";
const malledisdiaFormRef = ref();
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

const rules = {
	userName: [
		{
			required: true,
			message: "不能为空，请重新输入！",
			trigger: "blur"
		},
		{ min: 2, max: 50, message: "长度在2到50个字符", trigger: "blur" }
	],
	password: [
		{
			required: true,
			message: "不能为空，请重新输入！",
			trigger: "blur"
		},
		{ min: 6, max: 50, message: "长度在6到50个字符", trigger: "blur" }
	],
	roleCode: [
		{
			required: true,
			message: "不能为空，请选择！",
			trigger: "blur"
		}
	]
}


const state = reactive({
	// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式

	isEdit: false,
	ruleForm: {
		userName: "",
		password: "",
		roleCode: "",
		host: "",
		port: "",
		protocol: "",
		starttlsEnabled: "",
		tlsEnabled: "",
		status: "",
		emailSenderId: null
	} as any,
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});


// 打开弹窗
const openDialog = async (type: string, row?: any) => {
	if (type === 'edit') {
		state.ruleForm = {
			userName: row.userName,
			password: row.password,
			roleCode: row.roleCode,
			host: row.host,
			port: row.port,
			protocol: row.protocol,
			starttlsEnabled: row.starttlsEnabled,
			tlsEnabled: row.tlsEnabled,
			status: row.status,
			emailSenderId: row.emailSenderId,
		}

		state.dialog.title = '编辑配置';
		state.dialog.submitTxt = '修改';
	} else {

		state.ruleForm = {
			userName: "",
			password: "",
			roleCode: "",
			host: "",
			port: "",
			protocol: "",
			starttlsEnabled: "",
			tlsEnabled: "",
			status: "",

		}
		state.dialog.title = '新增配置';
		state.dialog.submitTxt = '新 增';
		// 清空表单，此项需加表单验证才能使用
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
	state.isEdit = (type === 'edit');
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};


// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {

	// 检查顶层表单
	malledisdiaFormRef.value.validate(async (valid: any) => {
		if (valid) {
			//检查参数列表

			try {
				if (state.dialog.type == 'edit') {
					let vo = Object.assign({}, {}, state.ruleForm);
					await useMailApi().updateMailboxConfig(vo)
				} else {
					let vo = state.ruleForm;
					await useMailApi().addMailboxConfig(vo)
				}
				ElMessage.success("操作成功");
				closeDialog(); // 关闭弹窗
				emit('refresh');
			} catch (error: any) {
				ElMessage.error(error.msg);
			}




		} else {
			ElMessage.warning("请检查数据的正确性！");
		}
	})



};





watch(
	() => state.dialog.isShowDialog,
	(newValue) => {
		if (newValue == true) {

		}
	}, { immediate: true }
);




// 暴露变量
defineExpose({
	openDialog,
});


</script>











<style lang="scss">
.el-select {
	width: 100% !important;
}

.el-form .el-form-item:last-of-type {
	margin-bottom: 22px !important;
}


.mail-send-edit-dialog-container {
	.bar_tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.el-table__expanded-cell {
		padding: 20px;
	}


	.alig_container {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

		&>div {
			margin: 15px 0px;
			display: flex;
			justify-content: center;
		}
	}
}
</style>